<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="nav">
        <a href="/home">首页</a>
        <a href="/service">服务</a>
        <a href="/mine">个人中心</a>
    </div>
    <div class="content">

    </div>
</body>

</html>
<script>
    /* 
        整个应用只是用一个HTML文档实现
        单页面路由---随着url地址的变化，动态更新网页(HTML文档)的内容

        前端路由：
        主要关注的是url地址的变化和对应资源的关系
        前端路由一般又前端程序员来维护
        前端路由的实现方案：
        方案一：hash路由
        方案二：history路由
        后端路由：
        主要关注的是，url地址的变化和后端数据的关系
        后端路由一般又后端程序员来维护
    
    */
    //history路由
    /* 
    思路：
    点击不同的按钮，通过history.pushState()切换不同的路由地址，然后根据
    不同的路由地址调用不同的函数，渲染不同的内容
    */
    var as = document.querySelectorAll('a')
    as.forEach((item) => {
        //给每个a标签绑定点击事件
        item.onclick = function (e) {
            e.preventDefault()
            //借助history 对象 pushState()方法 添加一个新的历史记录(地址栏地址会发生改变)
            //this.href获取的是 当前点击a标签的href属性值
            history.pushState({ title: '', url: '' }, '', this.href)
            //return false //阻止a标签的默认行为(跳转到其他页面)
            //根据不同的url地址，渲染不同的内容
            switch (location.pathname) {
                case '/home': home_page(); break
                case '/service': service_page(); break
                case '/mine': mine_page(); break
            }

        }
    })

    //渲染首页的内容
    function home_page() {
        document.querySelector('.content').innerHTML = '首页的内容'
    }
    //渲染服务的内容
    function service_page() {
        document.querySelector('.content').innerHTML = '服务的内容'
    }
    //渲染个人中心的内容
    function mine_page() {
        document.querySelector('.content').innerHTML = '个人中心的内容'
    }


</script>